import React, { useState, type ReactElement } from 'react'
import ReactDOM from 'react-dom/client'
import Player from './App'
import { type ThemeType, type AudioProps } from './interface'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)

root.render(
  <div>
    <Demo />
  </div>

)
const audioList: AudioProps[] = [

  // {
  //   src: '/七里香.mp3',
  //   name: '七里香',
  //   author: '周杰伦',
  //   pic: '/七里香.png',
  //   lyric: '/七里香.lrc',
  //   time: '04:59'
  // },
  {
    src: '/アイドル (偶像).mp3',
    name: 'アイドル (偶像)',
    author: 'YOASOBI',
    pic: '/アイドル (偶像).png',
    lyric: '/アイドル (偶像).lrc',
    tLyric: '/アイドル (偶像) - trans.lrc',
    time: '03:33'
  },
  {
    src: '/spiral.mp3',
    name: 'spiral',
    author: 'LONGMAN',
    pic: '/spiral.png',
    lyric: '/spiral.lrc',
    tLyric: '/spiral - trans.lrc',
    time: '03:51'
  },
  {
    src: '/One Last Kiss.mp3',
    name: 'One Last Kiss',
    author: '宇多田ヒカル',
    pic: '/One Last Kiss.png',
    lyric: '/One Last Kiss.lrc',
    tLyric: '/One Last Kiss - trans.lrc',
    time: '04:12'
  }

]

function Demo (): ReactElement {
  const [theme, setTheme] = useState<ThemeType>('light')
  console.log(theme)
  if (theme === 'light') {
    setTheme('dark')
  }
  return (
    <Player
      audioList={audioList}
      panelMode="bottom"
      playMode="single"
      defaultAudioPic="https://t10.baidu.com/it/u=2967197763,1499753582&fm=58"
      miniStyle={{
        left: 100,
        bottom: 100
      }}
      // theme={theme}
      // onThemeChange={(value) => { setTheme(value) }}
    // onVolumeChange={(value) => { console.log('测试onVolumeChange' + value) }}
    // onCurrentTimeChange={(value) => { console.log('onCurrentTimeChange' + value) }}
    // onAudioChange={(current) => { console.log('onAudioChange' + JSON.stringify(current)) }}
    // onAudioPause={(current) => { console.log('onAudioPause' + JSON.stringify(current)) }}
    // onAudioPlay={(current) => { console.log('onAudioPlay' + JSON.stringify(current)) }}
    />
  )
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
